<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒模型实战案例</title>
    <style type="text/css">
        #header{
            height: 80px;
            width: 100%;
            border: solid 1px rgb(21, 255, 0);
            position: fixed;
            top: 0;
            left: 0;
        }
        .div2{
            width: 100%;
            height:80px ;
            background-color: blue;
            font-size: 58px;
            text-align: center;
            line-height: 80px;
            color: crimson;
        }
        #container{
            position: relative;
            height: 400px;
            top: 80px;
            border: 0px solid seagreen;
        }
        #left_side{
            position: absolute;
            top: 0px;left: 0px;border: solid 1px #0000FF;
            width: 170px;height: 100%;
        }
        #content{
            margin: 0px 190px 0px;
            border: solid 1px red;
            height: 100%;
        }
        #right_side{
            position: absolute;top: 0px;right: 0px;
            border: solid 1px blue;width: 170px;
            height: 100%;
        }
        #footer{
            margin-top: 90px;
            height: 80px;
            border: solid 1px blue;
            text-align: center;
            line-height: 80px;
        }

        .divCss1{width: 35%;left: 5px;

            border: red 1px solid;
            height: auto! important;
            height: 200px;
            min-height: 200px;top: 10px;
            float: left;position: relative;}
        .divCss2{width: 25%;left: 10px;
            border: red 1px solid;
            height: auto! important;
            height: 200px;
            min-height: 200px;top: 10px;
            float: left;position: relative;}
        .divCss3{width: 38%;left: 16px;
            border: red 1px solid;
            height: auto! important;
            height: 200px;
            min-height: 200px;top: 10px;
            float: left;position: relative;}
        p{clear: both;position: relative;
        top: 15px;left: 5px;}
        .thumbnail{
            float:left;width: 200px;height: 150px;
            margin-top: 10px;margin-left: 60px;
            margin-right:50px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="header">
            <div class="div2">长江大学文理学院</div>
        </div>
        <div id="container">
            <div id="left_side">左边</div>
            <div id="content">
                <div class="divCss1" >内容左</div>
                <div class="divCss2" >内容中</div>
                <div class="divCss3" >内容右</div>
                <p>友情链接</p>
                <img class="thumbnail" src="imgs/1.jpg">
                <img class="thumbnail" src="imgs/2.jpg">
                <img class="thumbnail" src="imgs/3.jpg">
                <img class="thumbnail" src="imgs/4.jpg">
                
            </div>
            <div id="right_side">右边</div>

        </div>
        <div id="footer">
           <img src="imgs/6.jpg">
        </div>
    </div>
</body>
</html>